<template>
  <v-form-render ref="vFormRef"></v-form-render>
</template>
<script setup>
import { nextTick, onMounted, ref } from 'vue';

const vFormRef = ref(null);
const props = defineProps({
  json: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
    default: () => {}
  },
  isDisable: {
    type: Boolean,
    default: false
  }
});

const formData = ref({});
const formJson = ref({
  formConfig: [],
  widgetList: []
});

onMounted(() => {
  if (props.json) {
    formData.value = props.data;
    formJson.value = JSON.parse(props.json);
    nextTick(() => {
      vFormRef.value.setFormJson(formJson.value);
      vFormRef.value.setFormData(formData.value);
      if (props.isDisable) {
        nextTick(() => {
          vFormRef.value.disableForm();
        });
      }
    });
  }
});

const getFormData = async () => {
  try {
    return await vFormRef.value.getFormData();
  } catch (error) {
    console.log(error);
    return {};
  }
};

defineExpose({
  getFormData
});
</script>
<style lang="scss" scoped>
::v-deep(.main-header) {
  display: none;
}
</style>
